<template>
    <div>
        <el-container style=" font: 16px '微软雅黑';">
            <el-header style="text-align: right; font-size: 18px; background-color: #F3F3F3;height: 50px">
                <div style="float: left; border-left: 4px solid limegreen;margin: 13px 0px 0px -20px;">&nbsp;&nbsp;&nbsp; 管理微圈</div>
                <el-button @click="refresh">
                    <i class="el-icon-refresh"></i>
                    刷新
                </el-button>
                <el-button @click="backHome">
                    <i class="el-icon-close"></i>
                    关闭
                </el-button>
                <el-button @click="back">
                    <i class="el-icon-arrow-left"></i>
                    返回
                </el-button>
            </el-header>
            <el-container>
                <!--作者信息-->
                <el-aside width="255px"  style="background-color: white; height:800px">
                    <div class="profile">
                        <el-avatar :size="80">{{creatorName}}</el-avatar>
                        <br>
                        <span>&nbsp;&nbsp;&nbsp;{{creatorName}}</span>
                    </div>
                    <div class="moreMsg">
                        <el-descriptions class="margin-top" :column="1" :size="size">
                            <el-descriptions-item label="标题">{{moremsg.title}}</el-descriptions-item>
                            <el-descriptions-item label="创作者">{{moremsg.nickname}}</el-descriptions-item>
                            <el-descriptions-item label="分类">{{moremsg.cate}}</el-descriptions-item>
                            <el-descriptions-item label="创作日期">{{moremsg.writeDate}}</el-descriptions-item>
                            <el-descriptions-item label="账号">{{moremsg.account}}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-aside>
                <!--主体内容-->
                <el-container>
                    <el-main>
                        <div style="border: 1px solid #ccc; margin-top: 10px;">
                            <!-- 富文本编辑器 -->
                            <Editor
                                    style="height: 400px; overflow-y: hidden;"
                                    v-model="html"
                            />
                        </div>
                <div class="biaoge">
                            <template>
                                <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="articleHis"
                                            label="查看量"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="articleLike"
                                            label="点赞数"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="articleCollect"
                                            label="收藏">
                                    </el-table-column>
                                    <el-table-column
                                            prop="articleShare"
                                            label="分享量">
                                    </el-table-column>
                                </el-table>
                            </template>
                        </div>
                        <!--<div class="reply">
                            <div class="replytou">
                                <p style="color: #999">
                                    <i class="el-icon-position"></i>
                                    回复评价及其修改内容
                                </p>
                            </div>
                            <hr>
                            <div style="width: 450px; margin: 50px 0px 0px 220px">
                                <el-form ref="formReply" :label-position="labelPosition"
                                         label-width="80px"
                                         :model="formReply">
                                    <el-form-item label="用户名">
                                        <el-input v-model="formReply.userName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="账号">
                                        <el-input v-model="formReply.account"></el-input>
                                    </el-form-item>
                                    <el-form-item label="回复内容">
                                        <el-input type="textarea" v-model="formReply.content"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm">立即创建</el-button>
                                        <span>注意：管理员回复内容会在前台显示</span>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>-->
                        <div class="comment">
                            <div class="comment_tou">
                                <p style="color: #999">
                                    <i class="el-icon-position"></i>
                                    全部评论 <!--<span>{{comCount}}</span>-->
                                </p>
                            </div>
                            <hr style="color: #999">
                            <div class="comment_body" style="margin: 0px 0px 0px 140px;">
                                <div class="profile" v-show="comShow">
                                    <el-avatar :size="80">{{creatorName}}</el-avatar>
                                </div>
                                <div class="comment_msg" style="margin: -85px 0px 0px 204px;">
                                    <div v-show="comShow">
                                        <span>&nbsp;&nbsp;&nbsp;{{creatorName}}</span><br>
                                        <div class="com_content" style="margin: 15px;">
                                            回复{{creatorName}}：
                                            {{comContent}}
                                        </div>
                                    </div>
                                    <div class="com_create" style="margin: 15px">
                                        <div>{{commentDate}}</div>
                                        <div class="com_btn" style="margin: -21px 0px 0px 100px;">
                                            <a v-show="comShow" @click.prevent="getShow()" >隐藏</a>
                                            <a v-show="comLook" @click.prevent="getShow()">显示</a>
                                            &nbsp;
                                            <a @click.prevent="del()">删除</a>
                                        </div>
                                    </div>
                                </div>
                                <div style="border-bottom:3px #ccc dashed;"></div>
                                <div class="lookMore">
<!--                                    <router-link :to="{name:'details',params:{id:scope.row.microcircleId}}">
                                        查看更多评论</router-link>-->
                                </div>
                            </div>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import { Editor} from '@wangeditor/editor-for-vue'
    export default {
        name: "MicroDetails",
        components:{Editor },
        props:['id'],
        data(){
            return{
                size:'',
                creatorName:"",
                moremsg:{
                    title:"",
                    nickname:"",
                    cate:"",
                    writeDate:"",
                    account:""
                },
                comCount:0,
                comNickname:"",
                comContent:"",
                commentDate:"",
                comShow:true,
                comLook:false,
                editor: null,
                html: '<p></p>',
                tableData:[],
                labelPosition:'right',
                formReply:{
                    userName:'',
                    account:'',
                    content:'',
                }
            }
        },
        methods:{
            //返回首页
            backHome(){},
            //返回上一级页面
            back(){
                this.$router.back();
            },
            //刷新
            refresh(){
                this.getCreatorMsg();
            },
            getCreatorMsg(){
                console.log(this.id);
                this.$http.get('/microcircle/getCreator',{
                    params:{
                        microcircleId: this.id
                    }
                }).then(res =>{
                    this.moremsg.title = res.data.articleTitle;
                    this.moremsg.nickname = res.data.nickname;
                    this.moremsg.cate = res.data.name;
                    this.moremsg.writeDate = res.data.createDate;
                    this.moremsg.account = res.data.account;
                    this.creatorName = res.data.nickname;
                    this.html = res.data.articleContent;
                })
            },
            getBiaoge(){
                this.$http.get('/microcircle/getBiaoge',{
                    params:{
                        microcircleId: this.id
                    }
                }).then(res => {
                    this.tableData = res.data
                })
            },
            getCommentMsg() {
                this.$http.get('/microcircle/getCommentMsg',{
                    params:{
                        commodityId: this.id,
                        type:3
                    }
                }).then(res => {
                    console.log(res.data);
                    this.comNickname = res.data.nickname;
                    this.comContent = res.data.content;
                    this.commentDate = res.data.commentDate;
                    this.comCount = res.data.comCount;
                })
            },
            // 通过id值将用户删除
            async del(){
                // 弹框询问用户是否删除数据
                // 第一个参数是提示信息   第二个参数是对话框的标题
                const confirmResult =  await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    // 指定确认按钮的文本
                    confirmButtonText: '确定',
                    //指定取消按钮的文本
                    cancelButtonText: '取消',
                    //通过type指定提示信息前面的小图标
                    type: 'warning'
                }).catch(err=>{
                    // 这个捕获一下错误，要不然我们点击“取消”按钮之后控制台会报错
                    return err
                })

                // 如果用用户确认删除，则返回值为字符串 confirm
                // 如果用户取消了删除，则返回值为字符串 cancel
                // console.log(confirmResult)

                if(confirmResult !=='confirm'){
                    // 说明用户不想删除
                    return this.$message.info('已取消删除')
                }
                //  console.log('确认删除')
                const {data:res} = await this.$http.get('/microcircle/deleteComment/',{
                    params:{
                        commodityId: this.id,
                        type:3
                    }
                });


                /*if(res.status !==200){
                    return this.$message.error('删除用户失败')
                }
*/
                this.$message.success('删除用户成功！')
                this.getCommentMsg();
            },
            getShow(){
                this.comShow = false;
                this.comLook = true;
            }
        },
        created() {
            this.getCreatorMsg();
            this.getBiaoge();
            this.getCommentMsg();
        },
        mounted() {
            // 模拟 ajax 请求，异步渲染编辑器
            /*setTimeout(() => {
                this.html = '<p>Ajax 异步设置内容 HTML</p>'
            }, 1500)*/
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
        }
    }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
    .profile{
        margin: 37px 0px 0px 75px;
    }
    .moreMsg{
        margin: 50px 0px 0px 25px;
    }
    .comment_tou{
        position: relative;
        left: -395px;
        top: 10px;
    }
    a{
        color: green;
    }
    .biaoge{
        width: 700px;
        margin: 25px 0px 0px 141px;
    }
</style>